<template>
  <div class="securityContent" id="securityContent">
    <!-- 功能按钮 -->
    <div class="top-button">
      <div class="securityContent_button">
        <a-button class="addButton" type="primary" @click="addRecord(1)">
          <template #icon>
            <span class="iconfont icon-Add iconadd"></span>
          </template>
          新建
        </a-button>
      </div>
    </div>

    <!-- 表格展示部分 -->
    <treeTable :columns="columns.menusColumns" :dataSource="configData.records" :rowSelection="rowSelection"
      :defaultExpandAllRows="false" :isDefaultOpen="0" :scroll="scroll" ref="baseTables"
      :showCheckDelete="showCheckDelete" @changePage="changePage">
      <template #bodyCell="{ column, record }">
        <template v-if="column.dataIndex === 'isShow'">
          <a-switch size="small" v-model:checked="record.isShow" @change="changeShow(record)" />
        </template>
        <!-- <template v-if="column.dataIndex === 'isAuth'">
          <a-switch size="small" v-model:checked="record.isAuth" @change="changeAuth(record)" />
        </template> -->
        <template v-if="column.dataIndex === 'oparation'">
          <a class="eidtRecords" @click="eidtRecord(record)">{{
            oparation[0]
          }}</a>

          <!-- <a-popconfirm v-if="record.children" placement="topRight" ok-text="我知道了" :showCancel="false">
            <template #title>
              <p style="width: 197px">
                该菜单下还存在成员，请先移除后再删除菜单
              </p>
            </template>
            <a>{{ oparation[3] }}</a>
          </a-popconfirm> -->
          <a-popconfirm placement="topRight" ok-text="确定" cancel-text="取消" @confirm="confirmDelete(record)">
            <template #title>
              <p style="width: 197px">
                是否删除此菜单
              </p>
            </template>
            <a>{{ oparation[1] }}</a>
          </a-popconfirm>
        </template>
      </template>
    </treeTable>
  </div>
</template>
<script lang="ts" setup>
import { ref, reactive, computed, onMounted, nextTick, createVNode } from "vue";
import treeTable from "@/components/table/baseTable.vue";
import columns from "@/components/table/tableConfig/columnsName";
import { getTableScroll } from "@/components/table/tableConfig/table";
import baseModal from "@/components/modal/baseModal.vue";
import { useRoute, useRouter } from "vue-router";
import upload from "@/components/upload/uploadFile.vue";
import { Modal, message } from "ant-design-vue";
import request from "@/api/index";
import { scrollType, modeProp, detailDataItemType } from "@/type.d";
import { checkCreatSiteForm } from "./formRuler"

// type
type configDataType = {
  records: any[];
};
interface dataSourceType {
  [propName: string]: any;
}
interface FormState {
  tagWord: dataSourceType;
  password: string;
  remember: boolean;
}

//data
const router: any = useRouter();
let scroll: scrollType = reactive({ y: "", isFixed: false }); // 表单滚动设置
const showCheckDelete = true;  // 是否需要分页器中的自定义全选和删除
//表格数据
let configData = reactive<configDataType>({ records: [] });
let rowSelection = ref<(string | number)>(1);
const menuTypeOptions = ref([{ type: 1, value: '菜单' }, { type: 2, value: '按钮' }])
// 模态框数据
const isAddOrEdit = ref<boolean>(true); //判断是新家、编辑或者批量上传来复用模态框
const isVisible = ref<boolean>(false);
const parendData = ref<detailDataItemType>([]);
const oparation = ref<string[]>(['编辑', "删除"]); //站点表格操作项
const modAlProps: modeProp = reactive({
  width: "M",
  title: "新建菜单",
});

const menuType = ref<number>(1)
const menuFrom = ref<any>("menuFrom");
const fileList = ref<any>([])

//methods
const addRecord = async (type: number) => {//新加菜单模态框条件修改
  //添加菜单数据
  router.push({
    path: './menuOprations',
    query: {
      type: 'add',
      menuType: 1
    }
  })
};


const eidtRecord = async (item: dataSourceType) => {//编辑菜单管理数据
  router.push({
    path: './menuOprations',
    query: {
      type: 'edit',
      id: item.id,
      menuType: item.menuType
    }
  })

};

// 上传图片返回值
const uploadFinished = (data: any) => {
  fileList.value = data

}


//设置菜单是否参与权限分配
const changeAuth = async (record: dataSourceType) => {
  const params = {
    id: record.id,
    isAuth: record.isAuth
  }
  request.fetchMenuIsAuth(params)
    .then((res: any) => {
      if (res.code == "00000 00000") {
        message.success(res.message);
      } else {
        message.error(res.message);
      }
    })
    .catch((err: any) => {
      throw new Error(err);
    });
}

//设置菜单是否可见
const changeShow = async (record: dataSourceType) => {
  if (record.isNochange) {
    record.isShow = true
    return
  }
  const params = {
    id: record.id,
    isShow: record.isShow
  }
  request.fetchMenuIsShow(params)
    .then((res: any) => {
      if (res.code == "00000 00000") {
        message.success(res.message);
      } else {
        message.error(res.message);
      }
    })
    .catch((err: any) => {
      throw new Error(err);
    });
}


const confirmDelete = async (item: any) => {// 删除单个菜单
  deleteRecords(item.id)
};

const deleteRecords = async (id: number) => { // 调接口删除菜单
  await request.fetchMenuDelete({ id }).then((res: any) => {
    if (res.code == "00000 00000") {
      message.success(res.message);
      getRdecord({});
    } else {
      message.error(res.message);
    }
  });
}

const getRdecord = async (datas: dataSourceType = {}) => { // 获取表格数据
  const data = (await request.fetchMenuAlltree({})) || [];
  const loop = (dataList: any) => {
    dataList.forEach((item: any) => {
      item.menuinTypeSort = item.menuType == 1 ? '菜单' : (item.menuType == 2 ? '按钮' : '按钮菜单')
      if (item.menuName === '菜单管理' || item.menuName === '接口管理') {
        item.isShow = true
        item.isNochange = true
      }
      if (item.children && item.children.length) {
        loop(item.children)
      }
    })

  }
  data.length ? loop(data) : []
  configData.records = data
  parendData.value = data
  nextTick(() => {
    scroll.y = getTableScroll(74, "securityContent").y;
    scroll.isFixed = getTableScroll(74, "securityContent").isFixed;
  })
};


//切换分页器
const changePage = (data: { pageCurrent: any; pageSize: any }) => {
  let datas: dataSourceType = {
    pageNumber: data.pageCurrent,
    pageSize: data.pageSize
  }
  getRdecord(datas);
}
//onmounted
onMounted(() => {
  // fetchMenuAlltree();
  getRdecord();
});
</script>
<style lang="scss" scoped>
.securityContent {
  width: 100%;
  height: calc(100% - 72px);
  padding: 16px;
  background-color: #fff;
  overflow: hidden;

  .top-button {
    display: flex;
    flex-direction: row;
    padding-bottom: 24px;
    align-items: center;

    .securityContent_button {
      display: flex;

      .addButton {
        display: flex;
        align-items: center;
        margin-right: 8px;

        .iconadd {
          font-size: 24px;
          margin-right: 4px;
        }
      }

      .importButton {
        font-weight: 400;
        color: rgba(0, 0, 0, 0.85);
        margin-right: 8px;
      }

      .searchContent {
        margin-left: auto;
        margin-right: 0px;
      }
    }
  }


  :deep(.ant-table-thead .ant-table-cell:nth-last-of-type(1)) {
    text-align: right;
    margin-right: 16px;
  }

  .eidtRecords {
    margin-right: 16px;
  }
}

.model-tip {
  margin-top: 8px;
  font-size: 12px;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.45);
}



.tag-item {
  margin-bottom: 0 !important;
}

.menus-item .ant-input-affix-wrapper {
  width: 256px;
}

::v-deep(.ant-form-item) {
  width: 604px;
  display: flex;


  .ant-form-item-control {
    width: 248px;
    margin-left: 4px;
    flex: unset;
  }

  .ant-form-item-label {
    flex-grow: 0;
    width: 96px;
    text-align: right;
  }
}

::v-deep(.ant-form-item:nth-last-of-type(1)) {
  margin-left: 0px;
}

::v-deep(.ant-input-number) {
  width: 136px;
  margin-left: 4px;
}

::v-deep(.ant-input-affix-wrapper) {
  width: 492px;
}

::v-deep(.ant-form-item .ant-select, .ant-form-item .ant-cascader-picker) {
  width: 492px;
}
</style>
